<!-- 
@name: 登录页
-->
<template>
	<div id="taskDetail" v-if="!$store.state.oldPage" class="page">

		<div class="wrap">
			<div class="item flex-between flex-alignCenter">
				<div class="f1">设施名称</div>
				<div class="f2">{{data.sewageFacilityName}}</div>
			</div>
			<div class="item flex-between flex-alignCenter">
				<div class="f1">地址</div>
				<div class="f2">{{data.sewageFacilityAddress}}</div>
			</div>
			<div class="item flex-between flex-alignCenter">
				<div class="f1">任务描述</div>
				<div class="f2">{{data.remark}}</div>
			</div>
			<div class="item flex-between flex-alignCenter">
				<div class="f1">标签</div>
				<div class="flex-row" v-if="data.sewageFacilityTags">
					<div class="f3" v-for="item in data.sewageFacilityTags.split(',')">{{item}}</div>
				</div>
			</div>
		</div>
		<div class="flex-row flex-center" style="margin:0.4rem 0">
			<div :class="buttonIndex==1?'button1':'button2'" @click="buttonIndex=1" style="margin-right:0.2rem">待完成({{countList.patrolTaskCount}})</div>
			<div :class="buttonIndex==2?'button1':'button2'" @click="buttonIndex=2">历史记录({{countList.historyIssueTaskCount}})</div>
		</div>
		<div v-if="buttonIndex==1">
			<div class="wrap">
				<div>管道损坏排查</div>
				<div class="" v-for="(item,index) in data.taskRecordAssignmentDetailList" :key='index' style="background:#fff;    padding: 10px 16px;">
					<van-radio-group v-model="submitArray[index].result" label="职业">
						<div class="flex-row" style="margin-bottom:0.1rem">
							<div>{{index+1}}.{{item.taskItem}}：</div>
							<van-radio name="1" style="margin-right:10px">正常</van-radio>
							<van-radio name="2" style="margin-right:10px">异常</van-radio>

						</div>
					</van-radio-group>
					<div v-show="submitArray[index].result == '2'">
						<van-field v-model="submitArray[index].issueType" @click="showPickerFN()" label="问题类型：" placeholder="问题类型 >" />
						<div style="margin-top:0.1rem">上传凭证 &nbsp;&nbsp;
							<van-uploader v-model="item.fileUrls" max-count='1' :after-read="afterRead(index)" />
						</div>
						<!-- <div class="text1" @click="showPickerFN()">{{item.issueType?item.issueType:'问题类型 >'}}</div> -->

						<van-popup v-model="showPicker" round position="bottom">
							<van-picker show-toolbar :columns="dictData" @cancel="showPicker = false" @confirm="statusOnConfirm($event,index)" />
						</van-popup>
						<!-- afterRead($event,index) -->
						<van-field v-model="submitArray[index].remark" :label="''" rows="4" autosize type="textarea" maxlength="200" show-word-limit placeholder="备注" />
					</div>
				</div>
			</div>
			<div class="flex-center" style="margin-top:0.6rem">

				<van-button type="info" class="button" @click="aiMatchSolution_taskRecordAssignment" style="width:3rem">提交</van-button>
			</div>
		</div>
		<div v-if="buttonIndex==2" class="listWrap">
			<div class="flex-between flex-alignCenter" style="margin-bottom:0.6rem;font-weight: bold;font-size: 0.32rem;color: #000000;">
				<div>{{countList.historyIssueTaskCount}}处隐患</div>
				<div>已处置({{countList.finishedTaskCount}}) / 未处置({{countList.notFinishedTaskCount}}) </div>

			</div>
			<div class="list">
				<div class="item" v-for="item in taskList">
					<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
						<div class="f1">{{item.taskRecordEndDate}} 完成排查 <span class="f2">{{item.issueCount}}</span>个隐患</div>
						<img class="right" style="height: 0.47rem;width: 0.47rem;" @click="jump(`/precedure?id=${item.id}`)" src="@/assets/images/new/right.png" />
					</div>
				</div>

			</div>
		</div>
		<van-overlay :show="show">
			<div class="wrapper" @click="show = false">
				<div class="block">
					<div class="f3">人工智能解决方案</div>
					<div class="flex-between flex-alignCenter">
						<div class="f4">当前隐患：</div>
						<div class="f5">水位过高</div>
					</div>
					<div class="block2">
						<div class="flex-between flex-alignCenter item">
							<div class="f1">处置方案1</div>
							<div class="f2">xxxx</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">处置方案1</div>
							<div class="f2">xxxx</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">处置方案1</div>
							<div class="f2">xxxx</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">处置方案1</div>
							<div class="f2">xxxx</div>
						</div>
					</div>
					<div class="flex-row flex-center" style="margin:0.4rem 0">
						<div class="button2" @click="show = false" style="margin-right:0.2rem">已解决</div>
						<div class="button1" @click="submit">未解决-提交</div>
					</div>
				</div>
			</div>
		</van-overlay>
		<van-overlay :show="show2">
			<div class="wrapper" @click="show2 = false">
				<div class="block">
					<div class="f3">问题详情</div>
					<div class="block3" style="margin-bottom: 0.2rem;">
						<div class="flex-between flex-alignCenter item">
							<div class="f1">设施名称</div>
							<div class="f2">{{data2.sewageFacilityName}}</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">发生时间</div>
							<div class="f2">{{data2.taskRecordBeginDate}}</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">发生地点</div>
							<div class="f2">{{data2.sewageFacilityAddress}}</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">问题类型</div>
							<div class="f2">{{data2.sewageFacilityAddress}}</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">责任单位</div>
							<div class="f2">{{data2.sewageFacilityAddress}}</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">处理方式</div>
							<div class="f2">{{data2.sewageFacilityAddress}}</div>
						</div>
						<div class="flex-between flex-alignCenter item">
							<div class="f1">情况反馈</div>
							<div class="f2">{{data2.sewageFacilityAddress}}</div>
						</div>

					</div>
					<di class="f1">施工单位进场开工证明材料详情</di>
					<div class="block4">
						{{'暂无材料'}}
					</div>
					<div class="flex-row flex-center" style="margin:0.4rem 0">
						<div class="button3" @click="show = false" style="margin-right:0.2rem">提醒施工入场</div>
						<div class="button1" @click="submit">指定施工单位</div>
					</div>
				</div>
			</div>
		</van-overlay>

	</div>
</template>
<script>
import { mapState } from 'vuex';
import Qs from 'qs'; //引入qs  时axios的自带模块
var codeSetTime;
export default {
	name: 'app',
	components: {},
	data() {
		return {
			show: false,
			show2: false,
			showPicker: false,
			buttonIndex: 1,
			countList: [],
			dictData: [],
			taskList: [],
			submitArray: [],
			showData: {},
			data: {},
			data2: {},
		};
	},

	created() {
		this.detail_taskRecordAssignment();
		this.list_taskRecordAssignment();
		this.list_dict();
		this.count_taskRecordAssignment();

		this.buttonIndex = this.$route.query.buttonIndex;
	},
	methods: {
		showPickerFN() {
			this.showPicker = true;
		},
		submit() {
			var params = {
				id: this.data.id,
				address: this.$store.state.address,
				latitude: this.$store.state.lat,
				longitude: this.$store.state.lng,
				taskRecordAssignmentDetailList: this.submitArray,
			};
			this.$myApi.submit_taskRecordAssignment(params).then((res) => {
				if (res.code == 200) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.$router.back();
				} else {
				}
			});
		},
		aiMatchSolution_taskRecordAssignment() {
			if (!this.submitArray[0].remark) {
				this.submit();
				return;
			}
			var params = {
				content: this.submitArray[0].remark,
			};
			this.$myApi
				.aiMatchSolution_taskRecordAssignment(params)
				.then((res) => {
					if (res.code == 200) {
						if (res.data.content) {
							this.show = true;
							this.showData = res.data;
						} else {
							this.submit();
						}
					} else {
					}
				});
		},
		count_taskRecordAssignment() {
			var params = {};
			this.$myApi.count_taskRecordAssignment(params).then((res) => {
				if (res.code == 200) {
					this.countList = res.data;
				} else {
				}
			});
		},
		list_taskRecordAssignment() {
			var params = {
				type: this.buttonIndex, //1:巡检任务 2:预警任务
				haveIssueOnly: true,
			};
			this.$myApi.list_taskRecordAssignment(params).then((res) => {
				if (res.code == 200) {
					this.taskList = res.rows;
				} else {
				}
			});
		},
		afterRead(index) {
			return (file, detail) => {
				// 此时可以自行将文件上传至服务器
				console.log(file, index);
				let params = new FormData();
				params.append('file', file.file);
				this.$myApi.upload(params).then((res) => {
					if (res.code == 200) {
						this.submitArray[index].fileUrls = res.data.fileName;
					} else {
					}
				});
			};
		},
		detail_taskRecordAssignment() {
			var params = { id: this.$route.query.id };
			this.$myApi
				.detail_taskRecordAssignment(this.$route.query.id)
				.then((res) => {
					if (res.code == 200) {
						this.data = res.data;
						res.data.taskRecordAssignmentDetailList.forEach(
							(item) => {
								this.submitArray.push({
									id: item.id,
									finishStatus: 0,
									useAiPlan: 0,
								});
							}
						);
					} else {
					}
				});
		},
		statusOnConfirm(e, index) {
			console.log(111, index, e);
			this.submitArray[index].issueType = e.id;
			this.showPicker = false;
		},
		list_dict() {
			this.$myApi.list_dict('issue_type').then((res) => {
				if (res.code == 200) {
					var arr = [];
					res.data.forEach((element) => {
						arr.push({
							text: element.dictLabel,
							id: element.dictValue,
						});
					});
					this.dictData = arr;
				} else {
				}
			});
		},
		detail_taskRecordAssignment2(id) {
			var params = { id: this.$route.query.id };
			this.$myApi.detail_issue(id).then((res) => {
				if (res.code == 200) {
					this.data2 = res.data;
					this.show2 = true;
				} else {
				}
			});
		},

		jump(path) {
			this.$router.push(path);
		},
	},
};
</script>
<style lang="less" scoped>
#taskDetail {
	height: 100vh;
	padding: 0.1rem 0.2rem;
	background: rgba(248, 248, 248, 1);
	/deep/ .van-cell__value--alone {
		background: rgba(248, 248, 248, 1) !important;
		padding: 0.1rem;
	}
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.block {
			border-radius: 10px;
			padding: 0.76rem 0.46rem;
			background-color: #fff;
			width: 7.08rem;
			box-sizing: border-box;
			.f1 {
				font-size: 0.28rem;
				color: #030303;
			}
			.f2 {
				font-weight: bold;
				font-size: 0.32rem;
				color: #000000;
			}
			.f3 {
				font-weight: 400;
				font-size: 0.32rem;
				color: #000000;
				margin-bottom: 0.44rem;
				text-align: center;
			}
			.f4 {
				font-weight: bold;
				font-size: 0.32rem;
				color: #000000;
				margin-bottom: 0.22rem;
			}
			.f5 {
				font-weight: bold;
				font-size: 0.32rem;
				color: #f18800;
				margin-bottom: 0.22rem;
			}
			.button1 {
				background: #2947ff; /* height: 0.27rem; */
				/* width: 2rem; */
				position: relative;
				padding: 0.34rem 0.6rem;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 0.32rem;
				color: #ffffff;
				display: inline-block;
				border-radius: 40px;
				white-space: nowrap;
			}
			.button2 {
				background: rgba(225, 225, 225, 1); /* height: 0.27rem; */
				/* width: 2rem; */
				position: relative;
				padding: 0.34rem 0.6rem;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 0.32rem;
				color: rgba(91, 91, 91, 1);
				display: inline-block;
				border-radius: 40px;
				white-space: nowrap;
			}
			.button3 {
				background: #fff; /* height: 0.27rem; */
				/* width: 2rem; */
				border: 1px solid #2947ff;
				position: relative;
				padding: 0.34rem 0.6rem;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 0.32rem;
				color: rgba(41, 71, 255, 1);
				display: inline-block;
				border-radius: 40px;
				white-space: nowrap;
			}
			.block2 {
				width: 6.22rem;
				background: #f8f8f8;
				border-radius: 10px;
				padding: 0.6rem 0.42rem;
				.item {
					padding-bottom: 0.2rem;
					border-bottom: 1px dashed #eee;
					margin-top: 0.2rem;
				}
			}
			.block4 {
				width: 6.22rem;
				background: #f8f8f8;
				border-radius: 10px;
				padding: 0.2rem 0.4rem;
				margin-top: 0.2rem;
			}
			.block3 {
				width: 100%;
				.item {
					padding-bottom: 0.2rem;
					border-bottom: 1px dashed #eee;
					margin-top: 0.2rem;
				}
			}
		}
	}

	.button1 {
		background: #2947ff; /* height: 0.27rem; */
		/* width: 2rem; */
		position: relative;
		padding: 0.2rem 0.56rem;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 0.24rem;
		color: #ffffff;
		display: inline-block;
		border-radius: 20px;
	}
	.button2 {
		background: rgba(225, 225, 225, 1); /* height: 0.27rem; */
		/* width: 2rem; */
		position: relative;
		padding: 0.2rem 0.56rem;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 0.24rem;
		color: rgba(91, 91, 91, 1);
		display: inline-block;
		border-radius: 20px;
	}
	.listWrap {
		width: 7.08rem;
		background: #ffffff;
		box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05);
		border-radius: 30px;
		box-sizing: border-box;
		padding: 0.2rem 0.6rem;
		.list {
			height: 3.5rem;
			overflow: scroll;

			.item {
				padding-bottom: 0.2rem;
				border-bottom: 1px dashed #eee;
				margin-top: 0.2rem;
				.f1 {
					font-weight: bold;
					font-size: 0.28rem;
					color: #000000;
				}
				.f2 {
					font-weight: bold;
					font-size: 0.28rem;
					color: red;
				}
				.right {
					height: 0.47rem;
					width: 0.47rem;
				}
			}
		}
	}
	.wrap {
		width: 7.08rem;
		background: #ffffff;
		box-shadow: 0px 10px 20px 2px rgba(0, 0, 0, 0.05);
		border-radius: 30px;
		box-sizing: border-box;
		padding: 0.2rem 0.6rem;

		.item {
			padding-bottom: 0.2rem;
			border-bottom: 1px dashed #eee;
			margin-top: 0.2rem;
			.f1 {
				font-size: 0.28rem;
				color: #030303;
			}
			.f2 {
				font-weight: bold;
				font-size: 0.32rem;
				color: #000000;
			}
			.f3 {
				border-radius: 20px 20px 20px 20px;
				border: 1px solid #0080ff;
				font-size: 0.24rem;
				font-weight: 500;
				color: #0080ff;
				padding: 0.02rem 0.12rem;
				margin-right: 0.1rem;
			}
		}
	}
}
</style>